<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>封禁日志</title>
  <link rel="stylesheet" type="text/css" href="../../../admin/css/log/ban.css" />
</head>

<body>
  <div class="page-container">
    <form class="layui-form" action="">
      <div class="search-form">
        <div class="layui-row">
          <div class="layui-col-xs3">
            <div class="layui-form-item">
              <label class="layui-form-label">用户名</label>
              <div class="layui-input-block">
                <input type="text" name="keyward" id="keyward" class="layui-input layui-input-white"
                  lay-verify="required" placeholder="请输入关键词" autocomplete="off" class="layui-input">
              </div>
            </div>
          </div>
          <div class="layui-col-xs3">
            <div class="layui-form-item">
              <label class="layui-form-label">昵称</label>
              <div class="layui-input-block">
                <input type="text" name="keyward" id="keyward" class="layui-input layui-input-white"
                  lay-verify="required" placeholder="请输入关键词" autocomplete="off" class="layui-input">
              </div>
            </div>
          </div>
          <div class="layui-col-xs3">
            <div class="layui-form-item">
              <label class="layui-form-label w90">所属单位</label>
              <div class="layui-input-block ml120">
                <input type="text" name="keyward" id="keyward" class="layui-input layui-input-white"
                  lay-verify="required" placeholder="请输入关键词" autocomplete="off" class="layui-input">
              </div>
            </div>
          </div>
          <div class="layui-col-xs2 search-btn">
            <button type="button" class="layui-btn layui-btn-container" id="btnQuery">搜索</button>
            <button type="button" class="layui-btn layui-btn-primary" id="btnReset">重置</button>
          </div>
        </div>
      </div>
    </form>
    <div>
      <div class="layui-card">
        <div class="layui-card-body">
          <table class="layui-hide" id="test-ban" lay-filter="test-ban"></table>
        </div>
      </div>
    </div>
  </div>
  <div id="eventFormLayer2" class="event-form-layer">
    <form class="layui-form">
      <div class="layui-form-item ">
        <label class="layui-form-label"><span class="required-span">*</span>标题</label>
        <div class="layui-input-block">
          <input type="text" name="keyward" id="keyward" class="layui-input layui-input-white" lay-verify="required"
            placeholder="请输入标题" autocomplete="off" class="layui-input">
        </div>
      </div>
      <div class="layui-form-item ">
        <label class="layui-form-label"><span class="required-span">*</span>分类</label>
        <div class="layui-input-block">
          <select name="type" lay-filter="type" id="type" lay-verify="required">
            <option value="">请选择工具分类</option>
            <option value="1">未分类</option>
          </select>
        </div>
      </div>
      <div class="layui-form-item ">
        <label class="layui-form-label">描述</label>
        <div class="layui-input-block">
          <textarea class="layui-textarea bcgrey" placeholder="请输入工具描述"></textarea>
        </div>
      </div>
      <div class="layui-form-item ">
        <label class="layui-form-label red-star">附件</label>
        <div class="layui-input-block flex">
          <input type="text" name="keyward" id="keyward" class="layui-input layui-input-white" lay-verify="required"
            placeholder="支持本地上传和外部链接" autocomplete="off" class="layui-input w300">
          <button class="layui-btn layui-btn-primary layui-border" style="color:#fff !important">
            <i class="layui-icon layui-icon-upload"></i>
            本地上传
          </button>
        </div>
        <div class="red-star cgrey ml115 mt10 fs13">请zip后缀压缩文件，大小不超过20M</div>
      </div>
      <div class="layui-form-item ">
        <label class="layui-form-label">下载密码</label>
        <div class="layui-input-block">
          <input type="text" name="keyward" id="keyward" class="layui-input layui-input-white" lay-verify="required"
            placeholder="请输入下载密码" autocomplete="off" class="layui-input">
        </div>
      </div>
      <div class="layui-form-item ">
        <label class="layui-form-label">作者</label>
        <div class="layui-input-block">
          <input type="text" name="keyward" id="keyward" class="layui-input layui-input-white" lay-verify="required"
            placeholder="请输入工具作者" autocomplete="off" class="layui-input">
        </div>
      </div>
      <div class="layui-form-item ">
        <label class="layui-form-label">大小</label>
        <div class="layui-input-block">
          <input type="text" name="keyward" id="keyward" class="layui-input layui-input-white" lay-verify="required"
            placeholder="请输入工具大小" autocomplete="off" class="layui-input">
        </div>
      </div>
    </form>
  </div>
  <script type="text/html" id="operation2">
        <a class="layui-btn layui-btn-xs" lay-event="edit"><i class="layui-icon layui-icon-edit"></i>编辑</a>
        <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del"><i class="layui-icon layui-icon-delete"></i>删除</a>
    </script>
  <script type="text/html" id="modeSwitch">
        <input type="checkbox" name="{{d.mode}}" value="{{d.mode}}" title="内部赛" lay-skin="switch"
            lay-filter="modeSwitch" {{d.mode == 1 ? "checked" : ""}} >
    </script>
  <script type="text/html" id="toolbarDemo2">
        <div class="layui-btn-container">
            <button class="layui-btn" lay-event="getData">
                <i class="layui-icon layui-icon-delete"></i>
                删除选中
            </button>
        </div>
    </script>
  <script>
    layui.use(['table', 'dropdown', 'form', 'jquery', 'layer', 'laydate'], function () {
      var table = layui.table;
      var dropdown = layui.dropdown;
      var form = layui.form;
      var $ = layui.jquery;
      var laydate = layui.laydate;

      form.render('select');
      form.render('radio');
      var start = "#startTime", end = "#endDate";//开始时间选择框、结束时间选择框：文本框
      var startTime = laydate.render({
        elem: '#startTime',
        max: '2099-12-31 23:59:59',
        done: function (value, date) {
          endTime.config.min = {
            year: date.year,
            month: date.month - 1, //关键：由于月份是从0开始的，所以实际选择时要减1
            date: date.date,
            hours: date.hours,
            minutes: date.minutes,
            seconds: date.seconds
          };
        }
      })
      // 结束时间
      var endTime = laydate.render({
        elem: '#endTime',
        max: '2099-12-31 23:59:59',
        done: function (value, date) {
          startTime.config.max = {
            year: date.year,
            month: date.month - 1, //关键：由于月份是从0开始的，所以实际选择时要减1
            date: date.date,
            hours: date.hours,
            minutes: date.minutes,
            seconds: date.seconds
          };
        }
      });
      // 创建渲染实例
      table.render({
        elem: '#test-ban',
        url: '../../../admin/data/empty.json', // 此处为静态模拟数据，实际使用时需换成真实接口
        toolbar: '#toolbarDemo2',
        defaultToolbar: ['filter', 'exports', 'print'],
        height: 'full-35', // 最大高度减去其他容器已占有的高度差
        css: [ // 重设当前表格样式
          '.layui-table-tool-temp{padding-right: 145px;}'
        ].join(''),
        cellMinWidth: 80,
        totalRow: true, // 开启合计行
        page: true,
        cols: [[
          { type: 'checkbox', fixed: 'left' },
          { field: 'id', fixed: 'left', width: 80, title: 'ID' },
          { field: 'name', fixed: 'left', title: '用户名' },
          { field: 'nickname', fixed: 'left', title: '昵称' },
          { field: 'company', fixed: 'left', title: '所属单位' },
          { field: 'ip', fixed: 'left', title: 'IP地址' },
          { field: 'type', fixed: 'left', title: '类型' },
          { field: 'status', fixed: 'left', title: '解封时间' },
          { field: 'bantime', fixed: 'left', title: '封禁时间' },
          { field: 'status', fixed: 'left', title: '状态' },
          { field: '操作', title: '操作', width: 120, toolbar: '#operation2' }
        ]],
        done: function () {
          var id = this.id;
          // 下拉按钮测试
          dropdown.render({
            elem: '#dropdownButton', // 可绑定在任意元素中，此处以上述按钮为例
            data: [{
              id: 'add',
              title: '添加'
            }, {
              id: 'update',
              title: '编辑'
            }, {
              id: 'delete',
              title: '删除'
            }],
            // 菜单被点击的事件
            click: function (obj) {
              var checkStatus = table.checkStatus(id)
              var data = checkStatus.data; // 获取选中的数据
              switch (obj.id) {
                case 'add':
                  layer.open({
                    title: '添加',
                    type: 1,
                    area: ['80%', '80%'],
                    content: '<div style="padding: 16px;">自定义表单元素</div>'
                  });
                  break;
                case 'update':
                  if (data.length !== 1) return layer.msg('请选择一行');
                  layer.open({
                    title: '编辑',
                    type: 1,
                    area: ['80%', '80%'],
                    content: '<div style="padding: 16px;">自定义表单元素</div>'
                  });
                  break;
                case 'delete':
                  if (data.length === 0) {
                    return layer.msg('请选择一行');
                  }
                  layer.msg('delete event');
                  break;
              }
            }
          });
        }
      });
      // 工具栏事件
      table.on('toolbar(test-ban)', function (obj) {
        var id = obj.config.id;
        var checkStatus = table.checkStatus(id);
        var othis = lay(this);
        switch (obj.event) {
          case 'getCheckData':
            var data = checkStatus.data;
            layer.alert(layui.util.escape(JSON.stringify(data)));
            break;
          case 'getData':
            layer.open({
              type: 1,
              skin: 'previewImg',
              title: '新增工具',
              content: $("#eventFormLayer2"), // 获取ID为formLayer的DOM元素
              area: ['780px', '600px'],
              btn: ['新增工具', '取消'],
              shadeClose: false, success: function (layero, index) {
                var shade = $('.layui-layer-shade');
                console.log(layer.zIndex);
                shade.css('z-index', 899);
              },
              yes: function (index, layero) {
                // 表单提交事件
                // 触发提交事件
                form.on('submit(formSubmit)', function (data) {
                  // 发送Ajax请求提交表单
                  // $.post('path/to/your/server/endpoint', data.field, function(response){
                  //     layer.msg('表单提交成功!', {time: 1000});
                  //     // 关闭弹框
                  //     layer.close(index);
                  // });
                  return false; // 阻止表单默认提交
                });
              }
            });
            break;
          case 'LAYTABLE_TIPS':
            layer.alert('自定义工具栏图标按钮');
            break;
        };
      });
      // 表头自定义元素工具事件 --- 2.8.8+
      table.on('colTool(test-ban)', function (obj) {
        var event = obj.event;
        console.log(obj);
        if (event === 'email-tips') {
          layer.alert(layui.util.escape(JSON.stringify(obj.col)), {
            title: '当前列属性配置项'
          });
        }
      });

      // 触发单元格工具事件
      table.on('tool(test-ban)', function (obj) { // 双击 toolDouble
        var data = obj.data; // 获得当前行数据
        // console.log(obj)
        if (obj.event === 'edit') {
          layer.open({
            title: '编辑 - id:' + data.id,
            type: 1,
            area: ['80%', '80%'],
            content: '<div style="padding: 16px;">自定义表单元素</div>'
          });
        } else if (obj.event === 'more') {
          // 更多 - 下拉菜单
          dropdown.render({
            elem: this, // 触发事件的 DOM 对象
            show: true, // 外部事件触发即显示
            data: [{
              title: '查看',
              id: 'detail'
            }, {
              title: '删除',
              id: 'del'
            }],
            click: function (menudata) {
              if (menudata.id === 'detail') {
                layer.msg('查看操作，当前行 ID:' + data.id);
              } else if (menudata.id === 'del') {
                layer.confirm('真的删除行 [id: ' + data.id + '] 么', function (index) {
                  obj.del(); // 删除对应行（tr）的DOM结构
                  layer.close(index);
                  // 向服务端发送删除指令
                });
              }
            },
            align: 'right', // 右对齐弹出
            style: 'box-shadow: 1px 1px 10px rgb(0 0 0 / 12%);' // 设置额外样式
          })
        }
      });

      // 触发表格复选框选择
      table.on('checkbox(test-ban)', function (obj) {
        console.log(obj)
      });

      // 触发表格单选框选择
      table.on('radio(test-ban)', function (obj) {
        console.log(obj)
      });

      // 行单击事件
      table.on('row(test-ban)', function (obj) {
        //console.log(obj);
        //layer.closeAll('tips');
      });
      // 行双击事件
      table.on('rowDouble(test-ban)', function (obj) {
        console.log(obj);
      });

      var upload = layui.upload;

      //图片上传
      upload.render({
        elem: '#test-upload-img' //绑定元素
        , url: '/upload/' //改为你的图片上传接口
        , size: 1024 //设置文件最大可上传大小，单位KB
        , exts: 'jpg|png|gif' //设置可上传文件的扩展名
        , done: function (res) {
          //上传完毕回调
          if (res.code == 0) {
            //假设返回的res.data是图片链接
            $('#demo-upload-img').append('<img src="' + res.data + '" alt="上传成功" class="layui-upload-img">');
          }
        }
        , error: function () {
          //请求出错的处理
          console.log('上传失败');
        }
      });
      //图片上传
      upload.render({
        elem: '#logo-upload-img' //绑定元素
        , url: '/upload/' //改为你的图片上传接口
        , size: 1024 //设置文件最大可上传大小，单位KB
        , exts: 'jpg|png|gif' //设置可上传文件的扩展名
        , done: function (res) {
          //上传完毕回调
          if (res.code == 0) {
            //假设返回的res.data是图片链接
            $('#logo-upload-img').append('<img src="' + res.data + '" alt="上传成功" class="layui-upload-img">');
          }
        }
        , error: function () {
          //请求出错的处理
          console.log('上传失败');
        }
      });
    });
  </script>
</body>

</html>